
<style>
	.recordIndex{
		width: 100%;
		height: 100%;
	}
	li{
		width: 100%;
		height: 200px;
	}
	.record-box{
		-webkit-box-flex:1;
		display:-webkit-box;
		position:relative;
		height:90px;
		background:#fff;
		border-bottom:1px solid #e8e8e8;

	}
	.record-box>.icon{
		width:20%;
		margin:10px;
		display:-webkit-box;
		align-items:center;
		position:relative;
		overflow:hidden;
	}
	.icon>img{
		position:absolute;
		top:50%;
		left:50%;
		transform:translate(-50%, -50%);
		-webkit-transform:translate(-50%, -50%);

	}
	.record-box>.info_te{
		display:flex;
		flex:1;
		margin-left:10px;
		flex-direction:column;
		justify-content:center;
		align-items:flex-start;
		box-sizing: border-box;
		position: relative;
	}
	.icon-shanchu1{
		right: 0px;
		top: 15px;
		position: absolute;
	}
	.record-box-tit{
		width: 100%;
		height: 30px;
		font-size: 14px;
		line-height: 30px;
		display: flex;
	}
	.record-box-tit>span{
		flex: 1;
		display: inline-block;
	}
	.record-box-img{
		display:flex;
		flex-wrap:wrap;
	}
	.record-box-img>img{
		width: 50px;
		height: 50px;
		display: inline-block;
	}
	.record-box_text{
		height:75px;
		background-color:#f5f5f5;
		font-size:13px;
		overflow:auto;
		padding:5px;
	}
	.record-box_cart{
		padding:5px 0;
		display:flex;
		align-items:center;
		justify-content:flex-end;
		border-bottom:0.5px solid #e5e5e5;

	}
	.notMore{
		width: 100%;
		height: 300px;
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 14px;
		justify-content: center;
	}
	.notData{
	    width: 100%;
	    height: 30px;
	    line-height: 30px;
	    text-align: center;
        color: #999;
    	font-size: 14px;
	}
	.new-btn{
		width: 100%;
		height: 40px;
		line-height: 40px;
		text-align: center;
		color: #fff;
		position: fixed;
		bottom: 0px;
		left: 0;
		right: 0;
		background: #FF0000;
		font-size: 14px;
	}
	.accessory-list{
		padding-bottom: 40px;
	}
	.memo-li{
		width:100%;
		height:15px;
		display:flex;
		line-height:15px;
	}
	.memo-li>span{
		overflow:hidden;
		text-overflow:ellipsis;
		white-space:nowrap;
		min-width:250px;
		max-width:250px;
		display: inline-block;
	}
	.txt{
		font-size: 14px;
	}
	.memo{
		width:100%;
		height:15px;
		display:flex;
		box-sizing: border-box;
		line-height:15px;
	}
	.memo>span:first-child{
		overflow:hidden;
		text-overflow:ellipsis;
		white-space:nowrap;
		min-width:85px;
		max-width:85px;
		font-size: 14px;
	}
	.memo>span:last-child{
		text-align:right;
		display:block;
		flex:1;
		font-size: 14px;
	}
	
</style>

<template>
	<div class="accessory-list-wrap">
        <div class="accessory-list">
            <ul v-if="recordList && recordList.length>0">
            		<li class="record-box" v-for="(item,index) in recordList" :key="index" @click="goconlist(item)">
            		<div class="icon">
            			<img :src="item.icon"/>
            		</div>
            		<div class="info_te">
            			<div class="memo-li">
            				<span>{{item.project}}</span>
            				<i class="iconfont icon-shanchu1" @click.stop.prevent="deleteRecord(item, index)"></i>
            			</div>
            			<div class="txt">{{item.repairName}}</div>
            			<div class="memo">
            				<span>{{item.description}}</span>
            				<span>{{item.createTime}}</span>
            			</div>
            		</div>
            	</li>
            	 
            </ul>
            <div class="notMore" v-else>
            	抱歉！没有养护记录...
            </div>
            <div class="notData" v-if="notMore && recordList.length > 0">我是有底线的</div>
            <div class="new-btn" @click="goconlist">新建施工数据</div>
            <div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10"></div>
        </div>
    </div>
</template>

<script>
	import {Toast, MessageBox } from "mint-ui";
	export default {
		data() {
			return{
				pageSizeRecord: 0,
				goods: [
					{
						name:'阿斯顿发生大法阿斯发',
					},
					{
						name:'阿斯顿发生大法阿斯发',
					},
					{
						name:'阿斯顿发生大法阿斯发',
					},
					{
						name:'阿斯顿发生大法阿斯发',
					},
					{
						name:'阿斯顿发生大法阿斯发',
					},
					
				],
				recordList: [],
				busy: false,
				notMore:false,
				loginName:''
			}
		},
		mounted(){
			console.log(this.$route)
			if(this.$route.query){
				this.loginName = this.$route.query
				console.log(this.$store.getters.getLoginName)
			}
			this.getRecordsList()
		},
		methods: {
			goconlist(item = ''){
				console.log(item)
				if(item.repairId){
					this.$store.commit("setTructionData", {
						repairId: item.repairId,
						repairName: item.repairName,
						project: item.project,
						description: item.description,
						imageList: item.imageList.split(',')
		          	})
				}else{
					this.$store.commit("setTructionData", null)
				}
				this.$router.push({
					name: "construction-list",
					query: this.loginName
				})
			},
			deleteRecord(item, index) {
				let _this = this;
				
				 MessageBox.confirm('确定删除施工数据?').then(action => {
				 	console.log(action)
				 	if(action) {
				 		let url = this.$baseUrl.bizUrl + '/construction/record/front/delete'
			            let data = {
			                recordId: item.id
			            }
			            let callBack = (res) =>  {
			            	console.log(res)
			            	if(res.status == 200) {
			            		Toast({
						            message: "删除成功",
						        })
			            		_this.removeByValue(_this.recordList, _this.recordList[index])
			            	}else{
			            		Toast({
						            message: "删除失败",
						        })
			            	}
			            }
			            _this.$reqFormPost(url, data, callBack);
				 	}
				 })
			},
			removeByValue(arr, val) {
				for (var i = 0; i < arr.length; i++) {
			      if (arr[i] == val) {
			        	arr.splice(i, 1)
			        break;
			      }
			    }
			},
			getRecordsList(flag = false) {
				let self = this;
				let url = this.$baseUrl.bizUrl + "/construction/record/front/list";
				let data = {
					creator:this.$store.getters.getLoginName,	
					page: this.pageSizeRecord,
					pageSize: 10,
					merchantId: this.$store.getters.getMerchant.merchantId
				};
				let callBack = res => {
					console.log(res)
					console.log(888888888)
					if(res == null) {
						console.log("网络请求错误！");
						return;
					}

					if(res.data.status != 200) {
						console.log("请求数据错误" + url);
						return;
					}
					if(res.data.status === 200) {
						console.log("施工记录", res.data);
						if(res.data.data.recordList && res.data.data.recordList.length>0){
							res.data.data.recordList.forEach((item, index) => {
							  item.createTime = item.createTime.split(' ')[0]
			                  item.icon = item.imageList.split(',')[0]
			                })
						}
						
						if(flag){
							this.recordList = this.recordList.concat(res.data.data.recordList)
							if(res.data.data.recordList.length == 0){
								this.busy = true
								this.notMore = true
							}else{
								this.busy = false
							}
						}else{
							this.recordList = res.data.data.recordList
							console.log(this.recordList)
							this.busy = false
						}
					}
				};
				this.$reqFormPost(url, data, callBack);
			},
			loadMore: function (){
				this.busy = true;
                // 多次加载数据
                console.log(222)
                setTimeout(() => {
                   this.pageSizeRecord ++;
                   this.getRecordsList(true);
                }, 1000);
			}
		},
		
	}
</script>
